<template>
  <div class="container" :style="containerStyle">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

type Direction = 'column' | 'row'
type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
type CrossAlignment = 'start' | 'end' | 'center' | 'stretch'
type MainSize = 'min' | 'max'

interface Props {
  direction?: Direction
  mainAxisAlignment?: Alignment
  crossAxisAlignment?: CrossAlignment
  mainSize?: MainSize
  padding?: string
  margin?: string
  gap?: string | number
}

const props = withDefaults(defineProps<Props>(), {
  direction: 'column',
  mainAxisAlignment: 'start',
  crossAxisAlignment: 'center',
  mainSize: 'min',
  padding: '0',
  margin: '0',
  gap: '0',
})

const containerStyle = computed(() => ({
  display: 'flex',
  flexDirection: props.direction,
  justifyContent: props.mainAxisAlignment,
  alignItems: props.crossAxisAlignment,
  height: props.direction === 'column' && props.mainSize === 'max' ? '100%' : 'auto',
  width: props.direction === 'row' && props.mainSize === 'max' ? '100%' : 'auto',
  padding: props.padding,
  margin: props.margin,
  gap: typeof props.gap === 'number' ? `${props.gap}px` : props.gap,
}))
</script>

<style scoped>
.container {
  box-sizing: border-box;
}
</style>
